<template>
  <div class="messages">
    <div class="messages-sidebar">
      <div class="sidebar-header">
        <h3>信息</h3>
        <button class="compose-btn">✏️</button>
      </div>
      
      <div class="conversations-list">
        <div 
          v-for="conv in conversations" 
          :key="conv.id"
          class="conversation-item"
          :class="{ active: currentConversation === conv.id }"
          @click="currentConversation = conv.id"
        >
          <div class="conversation-avatar">{{ conv.avatar }}</div>
          <div class="conversation-info">
            <div class="conversation-header">
              <span class="conversation-name">{{ conv.name }}</span>
              <span class="conversation-time">{{ conv.time }}</span>
            </div>
            <div class="conversation-preview">{{ conv.lastMessage }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="messages-main">
      <div class="messages-header">
        <div class="header-info">
          <div class="contact-avatar">{{ currentConv?.avatar }}</div>
          <div class="contact-name">{{ currentConv?.name }}</div>
        </div>
        <button class="header-btn">ℹ️</button>
      </div>

      <div class="messages-content">
        <div 
          v-for="message in currentMessages" 
          :key="message.id"
          class="message"
          :class="{ sent: message.sent }"
        >
          <div class="message-bubble">
            {{ message.text }}
          </div>
          <div class="message-time">{{ message.time }}</div>
        </div>
      </div>

      <div class="messages-input">
        <button class="input-btn">📎</button>
        <input 
          type="text" 
          v-model="newMessage"
          @keyup.enter="sendMessage"
          placeholder="iMessage"
          class="message-input-field"
        />
        <button class="input-btn" @click="sendMessage">🎤</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Conversation {
  id: number
  name: string
  avatar: string
  lastMessage: string
  time: string
  messages: Array<{ id: number; text: string; sent: boolean; time: string }>
}

const conversations = ref<Conversation[]>([
  {
    id: 1,
    name: '张三',
    avatar: '👨',
    lastMessage: '好的，明天见！',
    time: '10:30',
    messages: [
      { id: 1, text: '你好！明天有空吗？', sent: false, time: '10:20' },
      { id: 2, text: '有的，什么事？', sent: true, time: '10:25' },
      { id: 3, text: '一起去喝咖啡吧', sent: false, time: '10:28' },
      { id: 4, text: '好的，明天见！', sent: true, time: '10:30' },
    ]
  },
  {
    id: 2,
    name: '李四',
    avatar: '👩',
    lastMessage: '收到',
    time: '昨天',
    messages: [
      { id: 1, text: '项目进展如何？', sent: false, time: '昨天 14:00' },
      { id: 2, text: '进展顺利，预计明天完成', sent: true, time: '昨天 14:30' },
      { id: 3, text: '收到', sent: false, time: '昨天 14:35' },
    ]
  },
])

const currentConversation = ref(1)
const newMessage = ref('')

const currentConv = computed(() => 
  conversations.value.find(c => c.id === currentConversation.value)
)

const currentMessages = computed(() => 
  currentConv.value?.messages || []
)

function sendMessage() {
  if (!newMessage.value.trim()) return
  
  const conv = conversations.value.find(c => c.id === currentConversation.value)
  if (conv) {
    conv.messages.push({
      id: conv.messages.length + 1,
      text: newMessage.value,
      sent: true,
      time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
    })
    conv.lastMessage = newMessage.value
    conv.time = '刚刚'
  }
  
  newMessage.value = ''
}
</script>

<style>
.messages {
  display: flex;
  height: 100%;
  background: white;
}

html.dark-mode .messages {
  background: #1c1c1e !important;
}

.messages-sidebar {
  width: 280px;
  background: rgba(240, 240, 245, 0.6);
  backdrop-filter: blur(20px);
  border-right: 0.5px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

html.dark-mode .messages-sidebar {
  background: rgba(40, 40, 42, 0.85) !important;
  border-right-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 52px 16px 16px 16px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

html.dark-mode .sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0;
}

html.dark-mode .sidebar-header h3 {
  color: #f5f5f7 !important;
}

.compose-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s ease;
}

.compose-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.conversations-list {
  flex: 1;
  overflow-y: auto;
}

.conversation-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}

html.dark-mode .conversation-item {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

.conversation-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

html.dark-mode .conversation-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.conversation-item.active {
  background: rgba(0, 122, 255, 0.1);
}

.conversation-avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  flex-shrink: 0;
}

.conversation-info {
  flex: 1;
  min-width: 0;
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.conversation-name {
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
}

html.dark-mode .conversation-name {
  color: #f5f5f7 !important;
}

.conversation-time {
  font-size: 11px;
  color: #86868b;
}

html.dark-mode .conversation-time {
  color: #aeaeb2 !important;
}

.conversation-preview {
  font-size: 13px;
  color: #86868b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark-mode .conversation-preview {
  color: #aeaeb2 !important;
}

.messages-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}

html.dark-mode .messages-main {
  background: #1c1c1e !important;
}

.messages-header {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  background: rgba(250, 250, 252, 0.8);
  backdrop-filter: blur(20px);
}

html.dark-mode .messages-header {
  background: rgba(50, 50, 52, 0.8) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
}

.contact-name {
  font-size: 15px;
  font-weight: 600;
  color: #1d1d1f;
}

html.dark-mode .contact-name {
  color: #f5f5f7 !important;
}

.header-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s ease;
}

.header-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.messages-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 70%;
}

.message.sent {
  align-items: flex-end;
  align-self: flex-end;
}

.message-bubble {
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
  color: #1d1d1f;
  word-wrap: break-word;
}

html.dark-mode .message-bubble {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f7 !important;
}

.message.sent .message-bubble {
  background: var(--accent-color);
  color: white;
}

.message-time {
  font-size: 11px;
  color: #86868b;
  margin-top: 4px;
  padding: 0 4px;
}

html.dark-mode .message-time {
  color: #aeaeb2 !important;
}

.messages-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
  background: rgba(250, 250, 252, 0.8);
  backdrop-filter: blur(20px);
}

html.dark-mode .messages-input {
  background: rgba(50, 50, 52, 0.8) !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.input-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s ease;
}

.input-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.message-input-field {
  flex: 1;
  padding: 8px 14px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

html.dark-mode .message-input-field {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f5f5f7 !important;
}

html.dark-mode .message-input-field::placeholder {
  color: #aeaeb2 !important;
}

.message-input-field:focus {
  border-color: var(--accent-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .messages-sidebar {
    width: 240px;
  }
  
  .message {
    max-width: 85%;
  }
}
</style>

